<template>
  <div class="shows-page">
    <!-- Header Section -->
    <section class="shows-header" 
             :style="{ backgroundImage: `url(${require('../assets/img/subheader-3.jpg')})` }">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h1 class="page-title" data-aos="fade-up">音乐演出</h1>
            <p class="page-subtitle" data-aos="fade-up" data-aos-delay="200">
              感受现场音乐的无限魅力
            </p>
            <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="300">
              <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item">
                  <router-link to="/" class="text-light">首页</router-link>
                </li>
                <li class="breadcrumb-item active text-light" aria-current="page">演出</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>

    <!-- Filter Section -->
    <section class="filter-section py-4">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-4">
            <div class="search-box">
              <input 
                v-model="searchQuery"
                type="text" 
                class="form-control"
                placeholder="搜索演出..."
              >
              <i class="fas fa-search search-icon"></i>
            </div>
          </div>
          <div class="col-md-8">
            <div class="filter-controls">
              <select v-model="selectedCity" class="form-select me-2">
                <option value="">所有城市</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
                <option value="杭州">杭州</option>
              </select>
              <select v-model="selectedGenre" class="form-select me-2">
                <option value="">所有类型</option>
                <option value="流行">流行</option>
                <option value="摇滚">摇滚</option>
                <option value="电子">电子</option>
                <option value="爵士">爵士</option>
                <option value="古典">古典</option>
              </select>
              <select v-model="sortBy" class="form-select">
                <option value="date">按时间</option>
                <option value="price">按价格</option>
                <option value="popular">按热度</option>
                <option value="name">按名称</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Featured Show -->
    <section class="featured-show py-5 gradient-bg" v-if="featuredShow">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6" data-aos="fade-right">
            <div class="featured-show-image">
              <img :src="featuredShow.image" :alt="featuredShow.title" class="img-fluid rounded-3">
              <div class="featured-badge">推荐演出</div>
            </div>
          </div>
          <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
            <div class="featured-show-info">
              <h2 class="featured-show-title">{{ featuredShow.title }}</h2>
              <p class="featured-show-artist">{{ featuredShow.artist }}</p>
              <div class="featured-show-details">
                <div class="detail-item">
                  <i class="fas fa-calendar-alt me-2"></i>
                  <span>{{ featuredShow.date }} {{ featuredShow.time }}</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-map-marker-alt me-2"></i>
                  <span>{{ featuredShow.venue }}, {{ featuredShow.city }}</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-tag me-2"></i>
                  <span>{{ featuredShow.genre }}</span>
                </div>
              </div>
              <p class="featured-show-description">{{ featuredShow.description }}</p>
              <div class="featured-price-section">
                <div class="price-info">
                  <span class="price-from">票价从</span>
                  <span class="featured-price">¥{{ featuredShow.priceRange.min }}</span>
                  <span class="price-to">起</span>
                </div>
                <div class="featured-actions">
                  <button class="btn btn-light btn-lg me-3">
                    <i class="fas fa-ticket-alt me-2"></i>立即购票
                  </button>
                  <button class="btn btn-outline-light btn-lg">
                    <i class="fas fa-heart me-2"></i>收藏
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Shows Grid -->
    <section class="shows-grid py-5">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title">所有演出</h2>
          <p class="section-subtitle">精彩演出，不容错过</p>
        </div>
        
        <div class="row">
          <div 
            v-for="(show, index) in filteredShows" 
            :key="index"
            class="col-xl-4 col-lg-6 col-md-6 mb-4"
            data-aos="fade-up"
            :data-aos-delay="index * 50"
          >
            <div class="show-card glass" @click="selectShow(show)">
              <div class="show-image-container">
                <img :src="show.image" :alt="show.title" class="show-image">
                <div class="show-overlay">
                  <div class="overlay-content">
                    <button class="view-btn" @click.stop="selectShow(show)">
                      <i class="fas fa-eye"></i>
                    </button>
                    <div class="show-actions mt-3">
                      <button class="action-btn" @click.stop="addToWishlist(show)">
                        <i class="fas fa-heart" :class="{ 'text-danger': show.isWishlisted }"></i>
                      </button>
                      <button class="action-btn" @click.stop="shareShow(show)">
                        <i class="fas fa-share"></i>
                      </button>
                      <button class="action-btn" @click.stop="buyTicket(show)">
                        <i class="fas fa-ticket-alt"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="show-date-badge">
                  <div class="date-day">{{ show.day }}</div>
                  <div class="date-month">{{ show.month }}</div>
                </div>
                <div class="show-status" :class="show.status">
                  {{ getStatusText(show.status) }}
                </div>
              </div>
              <div class="show-info p-3">
                <h5 class="show-title">{{ show.title }}</h5>
                <p class="show-artist">{{ show.artist }}</p>
                <div class="show-details">
                  <div class="show-venue">
                    <i class="fas fa-map-marker-alt me-1"></i>
                    {{ show.venue }}, {{ show.city }}
                  </div>
                  <div class="show-time">
                    <i class="fas fa-clock me-1"></i>
                    {{ show.time }}
                  </div>
                </div>
                <div class="show-price-section mt-2">
                  <div class="price-range">
                    <span class="price-from">¥{{ show.priceRange.min }}</span>
                    <span class="price-separator">-</span>
                    <span class="price-to">¥{{ show.priceRange.max }}</span>
                  </div>
                  <button class="btn btn-sm btn-primary">购票</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Load More Button -->
        <div class="text-center mt-5" v-if="hasMoreShows">
          <button class="btn btn-outline-primary btn-lg" @click="loadMoreShows">
            加载更多演出
            <i class="fas fa-chevron-down ms-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- Venues Section -->
    <section class="venues py-5 gradient-bg-3">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">热门场馆</h2>
          <p class="section-subtitle text-white">最受欢迎的演出场地</p>
        </div>
        
        <div class="row">
          <div 
            v-for="(venue, index) in popularVenues" 
            :key="index"
            class="col-lg-3 col-md-6 mb-4"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div class="venue-card">
              <div class="venue-image-container">
                <img :src="venue.image" :alt="venue.name" class="venue-image">
                <div class="venue-overlay">
                  <div class="venue-info">
                    <h5 class="venue-name">{{ venue.name }}</h5>
                    <p class="venue-location">{{ venue.city }}</p>
                    <div class="venue-capacity">容量: {{ venue.capacity }}人</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Show Detail Modal -->
    <div class="modal fade" id="showModal" tabindex="-1" v-if="selectedShow">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content bg-dark text-white">
          <div class="modal-header border-0">
            <h5 class="modal-title">演出详情</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">
                <img :src="selectedShow.image" :alt="selectedShow.title" class="img-fluid rounded">
              </div>
              <div class="col-md-6">
                <h3>{{ selectedShow.title }}</h3>
                <h5 class="text-muted">{{ selectedShow.artist }}</h5>
                <div class="show-modal-details mt-3">
                  <p><strong>演出时间：</strong>{{ selectedShow.date }} {{ selectedShow.time }}</p>
                  <p><strong>演出场馆：</strong>{{ selectedShow.venue }}</p>
                  <p><strong>演出城市：</strong>{{ selectedShow.city }}</p>
                  <p><strong>音乐类型：</strong>{{ selectedShow.genre }}</p>
                  <p><strong>票价范围：</strong>¥{{ selectedShow.priceRange.min }} - ¥{{ selectedShow.priceRange.max }}</p>
                  <p><strong>演出状态：</strong>
                    <span class="badge" :class="'bg-' + getStatusColor(selectedShow.status)">
                      {{ getStatusText(selectedShow.status) }}
                    </span>
                  </p>
                </div>
                <div class="show-description mt-3">
                  <h6>演出介绍</h6>
                  <p>{{ selectedShow.description }}</p>
                </div>
                <div class="modal-actions mt-4">
                  <button class="btn btn-primary me-2" :disabled="selectedShow.status === 'sold-out'">
                    <i class="fas fa-ticket-alt me-1"></i>购买门票
                  </button>
                  <button class="btn btn-outline-light me-2">
                    <i class="fas fa-heart me-1"></i>收藏
                  </button>
                  <button class="btn btn-outline-light">
                    <i class="fas fa-share me-1"></i>分享
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Shows',
  data() {
    return {
      searchQuery: '',
      selectedCity: '',
      selectedGenre: '',
      sortBy: 'date',
      selectedShow: null,
      hasMoreShows: true,
      currentPage: 1,
      featuredShow: {
        title: '星空音乐节',
        artist: '多位明星艺术家',
        image: require('../assets/img/shows/details/1.jpg'),
        date: '2024年12月15日',
        time: '19:30',
        venue: '上海大舞台',
        city: '上海',
        genre: '综合',
        description: '一场汇聚众多知名艺术家的盛大音乐节，将为您呈现最精彩的现场表演。从流行到摇滚，从电子到爵士，各种音乐风格应有尽有。',
        priceRange: { min: 180, max: 880 },
        status: 'available'
      },
      shows: [
        {
          title: '星空音乐节',
          artist: '多位明星艺术家',
          image: require('../assets/img/shows/1.jpg'),
          date: '2024年12月15日',
          time: '19:30',
          venue: '上海大舞台',
          city: '上海',
          genre: '综合',
          priceRange: { min: 180, max: 880 },
          status: 'available',
          day: '15',
          month: 'Dec',
          isWishlisted: false,
          description: '年度最盛大的音乐节活动'
        },
        {
          title: '摇滚之夜',
          artist: '雷霆乐队',
          image: require('../assets/img/shows/2.jpg'),
          date: '2024年12月22日',
          time: '20:00',
          venue: '北京工体',
          city: '北京',
          genre: '摇滚',
          priceRange: { min: 280, max: 680 },
          status: 'available',
          day: '22',
          month: 'Dec',
          isWishlisted: true,
          description: '激情四射的摇滚音乐演出'
        },
        {
          title: '爵士晚会',
          artist: '蓝调女王',
          image: require('../assets/img/shows/3.jpg'),
          date: '2024年12月28日',
          time: '19:00',
          venue: '深圳音乐厅',
          city: '深圳',
          genre: '爵士',
          priceRange: { min: 150, max: 480 },
          status: 'available',
          day: '28',
          month: 'Dec',
          isWishlisted: false,
          description: '优雅的爵士音乐盛宴'
        },
        {
          title: '电子音乐节',
          artist: 'EDM大师',
          image: require('../assets/img/shows/4.jpg'),
          date: '2024年12月30日',
          time: '21:00',
          venue: '广州体育馆',
          city: '广州',
          genre: '电子',
          priceRange: { min: 200, max: 580 },
          status: 'hot',
          day: '30',
          month: 'Dec',
          isWishlisted: false,
          description: '震撼的电子音乐体验'
        },
        {
          title: '古典音乐会',
          artist: '交响乐团',
          image: require('../assets/img/shows/md/1.jpg'),
          date: '2025年1月5日',
          time: '19:30',
          venue: '杭州大剧院',
          city: '杭州',
          genre: '古典',
          priceRange: { min: 120, max: 380 },
          status: 'available',
          day: '05',
          month: 'Jan',
          isWishlisted: false,
          description: '经典古典音乐作品演奏'
        },
        {
          title: '流行演唱会',
          artist: '林晓音',
          image: require('../assets/img/shows/md/2.jpg'),
          date: '2025年1月8日',
          time: '20:00',
          venue: '上海体育馆',
          city: '上海',
          genre: '流行',
          priceRange: { min: 320, max: 1280 },
          status: 'sold-out',
          day: '08',
          month: 'Jan',
          isWishlisted: true,
          description: '年度最受期待的流行演唱会'
        }
      ],
      popularVenues: [
        {
          name: '上海大舞台',
          city: '上海',
          capacity: '8000',
          image: require('../assets/img/misc/1.jpg')
        },
        {
          name: '北京工体',
          city: '北京',
          capacity: '12000',
          image: require('../assets/img/misc/2.jpg')
        },
        {
          name: '深圳音乐厅',
          city: '深圳',
          capacity: '3000',
          image: require('../assets/img/misc/3.jpg')
        },
        {
          name: '广州体育馆',
          city: '广州',
          capacity: '15000',
          image: require('../assets/img/misc/4.jpg')
        }
      ]
    }
  },
  computed: {
    filteredShows() {
      let filtered = this.shows

      // Search filter
      if (this.searchQuery) {
        filtered = filtered.filter(show => 
          show.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          show.artist.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          show.venue.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      }

      // City filter
      if (this.selectedCity) {
        filtered = filtered.filter(show => show.city === this.selectedCity)
      }

      // Genre filter
      if (this.selectedGenre) {
        filtered = filtered.filter(show => show.genre === this.selectedGenre)
      }

      // Sort
      switch (this.sortBy) {
        case 'price':
          filtered = filtered.sort((a, b) => a.priceRange.min - b.priceRange.min)
          break
        case 'popular':
          filtered = filtered.sort((a, b) => (b.status === 'hot' ? 1 : 0) - (a.status === 'hot' ? 1 : 0))
          break
        case 'name':
          filtered = filtered.sort((a, b) => a.title.localeCompare(b.title))
          break
        default: // date
          filtered = filtered.sort((a, b) => new Date(a.date) - new Date(b.date))
      }

      return filtered
    }
  },
  methods: {
    selectShow(show) {
      this.selectedShow = show
      const { Modal } = require('bootstrap')
      const modal = new Modal(document.getElementById('showModal'))
      modal.show()
    },
    addToWishlist(show) {
      show.isWishlisted = !show.isWishlisted
      console.log('Wishlist status changed:', show.title, show.isWishlisted)
    },
    shareShow(show) {
      console.log('Sharing show:', show.title)
    },
    buyTicket(show) {
      console.log('Buying ticket for:', show.title)
    },
    loadMoreShows() {
      this.currentPage++
      if (this.currentPage >= 3) {
        this.hasMoreShows = false
      }
    },
    getStatusText(status) {
      const statusMap = {
        'available': '有票',
        'hot': '热门',
        'sold-out': '售罄',
        'coming-soon': '即将开售'
      }
      return statusMap[status] || '有票'
    },
    getStatusColor(status) {
      const colorMap = {
        'available': 'success',
        'hot': 'danger',
        'sold-out': 'secondary',
        'coming-soon': 'warning'
      }
      return colorMap[status] || 'success'
    }
  }
}
</script>

<style scoped>
/* Header Styles */
.shows-header {
  height: 400px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.page-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

/* Filter Section */
.filter-section {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box {
  position: relative;
}

.search-box .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding-right: 50px;
  border-radius: 25px;
}

.search-box .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
}

.filter-controls {
  display: flex;
  justify-content: flex-end;
}

.filter-controls .form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: auto;
  min-width: 120px;
}

.filter-controls .form-select option {
  background: #2d2d2d;
  color: white;
}

/* Featured Show */
.featured-show-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.featured-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.featured-show-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
}

.featured-show-artist {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
}

.featured-show-details {
  margin-bottom: 1.5rem;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
}

.featured-show-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.featured-price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.price-from {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

.featured-price {
  font-size: 2.5rem;
  font-weight: bold;
  color: #4ecdc4;
}

.price-to {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

/* Show Cards */
.show-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.show-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.show-image-container {
  position: relative;
  overflow: hidden;
}

.show-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.show-card:hover .show-image {
  transform: scale(1.05);
}

.show-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.show-card:hover .show-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
}

.view-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  color: white;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.view-btn:hover {
  transform: scale(1.1);
}

.show-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.show-date-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.75rem 0.5rem;
  border-radius: 10px;
  text-align: center;
  min-width: 60px;
}

.date-day {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.date-month {
  font-size: 0.8rem;
  text-transform: uppercase;
}

.show-status {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.show-status.available {
  background: rgba(40, 167, 69, 0.9);
  color: white;
}

.show-status.hot {
  background: rgba(220, 53, 69, 0.9);
  color: white;
}

.show-status.sold-out {
  background: rgba(108, 117, 125, 0.9);
  color: white;
}

.show-status.coming-soon {
  background: rgba(255, 193, 7, 0.9);
  color: black;
}

.show-title {
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.show-artist {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.show-details {
  margin-bottom: 1rem;
}

.show-venue,
.show-time {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.25rem;
}

.show-price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-range {
  font-size: 1rem;
  font-weight: 600;
}

.price-from,
.price-to {
  color: #4ecdc4;
}

.price-separator {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0.25rem;
}

/* Venue Cards */
.venue-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 250px;
}

.venue-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.venue-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.venue-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  padding: 2rem 1.5rem 1.5rem;
  color: white;
}

.venue-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.venue-location {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
}

.venue-capacity {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Section Titles */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .featured-show-title {
    font-size: 2rem;
  }
  
  .featured-price-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .filter-controls {
    margin-top: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .filter-controls .form-select {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}
</style>
